import React from "react";
import { useDispatch, useSelector } from "react-redux";
import {
    citySetIsDesc,
    citySetIsSeat,
    citySetIsSpeed,
} from "../../reducers/citySlice";
import { Checkbox, List, NavBar, TabBar } from "antd-mobile";
import {  AaOutline } from "antd-mobile-icons";


function FooterMy() {
    const citySlice = useSelector((state) => state.citySlice);

    const dispatch = useDispatch();
    return (
        <div style={{ display: "flex", justifyContent: "space-around" }}>
            <Checkbox
                checked={citySlice.isDesc}
                onChange={(checked) => {
                    dispatch(citySetIsDesc(checked));
                }}
                icon={() => {
                    return null;
                }}
                style={{
                    textAlign: "center",
                    color: citySlice.isDesc ? "blue" : "black",
                }}
            >
                <AaOutline style={{ fontSize: 20 }} />
                <div style={{ fontSize: 12 }}>出发早晚</div>
            </Checkbox>
            <Checkbox
                checked={citySlice.isSpeed}
                onChange={(checked) => {
                    dispatch(citySetIsSpeed(checked));
                }}
                icon={() => {
                    return null;
                }}
                style={{
                    textAlign: "center",
                    color: citySlice.isSpeed ? "blue" : "black",
                }}
            >
                <AaOutline style={{ fontSize: 20 }} />
                <div style={{ fontSize: 12 }}>只看高铁</div>
            </Checkbox>
            <Checkbox
                checked={citySlice.isSeat}
                onChange={(checked) => {
                    dispatch(citySetIsSeat(checked));
                }}
                icon={() => {
                    return null;
                }}
                style={{
                    textAlign: "center",
                    color: citySlice.isSeat ? "blue" : "black",
                }}
            >
                <AaOutline style={{ fontSize: 20 }} />
                <div style={{ fontSize: 12 }}>只看有票</div>
            </Checkbox>
        </div>
    );
}

export default React.memo( FooterMy );
